/*
 * Overview: Home Style
 */
 
.banner-box { position: relative; width: 100%; height: 600px; overflow: hidden; z-index: 100; background-color: #fefefe; }
.banner-item { position: relative; height: 600px; }
.banner-bg img { position: absolute; left: 50%; top: 0; margin-left: -600px; width: 1200px; }
.banner-bg { position: relative; width: 100%; height: 100%; overflow: hidden; }
.banner-inner { position: absolute; width: 100%; top: 38%; z-index: 200; }

.banner-inner .banner-icon { /* margin-top: 214px; */ padding-left: 20px; margin-left: 0; height: 110px; line-height: 110px; padding-right: 60px; font-size: 46px; letter-spacing: 2px; font-weight: 400; text-align: left; color: #fff; float: left; background-color: rgba(0,0,0,0.5); }



.banner-btn { position: absolute; left: 0; bottom: 42px; width: 100%; height: 20px; line-height: 20px; text-align: center; }
.banner-btn span { margin: 0 9px; display: inline-block; *display: inline; *zoom: 1; width: 10px; height: 10px; border-radius: 6px; background-color: #c9ccd2; cursor: pointer; }
.banner-btn .swiper-active-switch { background-color: #ffcf4e; }

.about { margin-top: 25px; overflow-y: hidden; background: url(../images/map.png) center top no-repeat; font-family: '\5FAE\8F6F\96C5\9ED1'; }
.about-title{padding-left: 30px; width: 630px; float: right; margin-right: 25px;}
.about-con{padding-left: 30px;}
.about-title h2 { display: block; margin: 22px 0 0 0; font-size: 26px; line-height: 42px; color: #fff; }
.about-title h3 { display: block; margin-top: 0px; line-height: 20px; color: #fff; font-size: 14px; }
.about-title i { display: block; margin-top: 17px; height: 2px; width: 93px; background-color: #fff; }

.about-text { width: 630px; height: 367px; float: right; margin-top: 20px; margin-right: 20px;}
.about-text p { line-height: 28px; font-size: 14px; color: #fff; }

.about-img { float: left; margin-left: 50px; }

.about-map { float: right; width: 280px; height: 343px; background: url(../images/about-1.png) left top no-repeat; }
.map { position: relative; margin-top: 8px; width: 270px; height: 323px; }

.logo-introduce { margin-top: 10px; margin-bottom: 102px; border-top: 1px solid #e5e5e5; overflow: hidden; }
.logo-icon { float: left; margin-top: 37px; }
.introduce { margin-top: 43px; margin-left: 70px; float: left; width: 895px; }
.introduce h3 { display: block; margin-top: 10px; line-height: 42px; color: #070707; font-size: 26px; }
.introduce i { display: block; margin-top: 14px; margin-bottom: 17px; height: 2px; width: 93px; background-color: #ffcf4e; }
.introduce p { line-height: 28px; font-size: 14px; color: #212121; }

.wrap-box { display: block; position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; background-color: #000; background-color: rgba(0,0,0,0.9); }
.wrap-box .width { position: relative; margin: 0 auto; }
.wrap-box .width span { width: 32px; height: 32px; position: absolute; top: -37px; right: 13px; background: url(../images/close.png) center no-repeat; cursor: pointer; }
.wrap-box img { display: block; width: 90%; margin: 0 auto; margin-top: 130px; }

@media only screen and (max-width: 1200px){

	.about-text { width: 60%; height: auto; }
	.about-title,
	.about-con { margin-left: 5%; }
	.about-img { float: right; margin-left: 4%; margin-right: 5%; margin-top: -60px; width: 26%; }
	.about-img img { max-width: 100%; float: right; margin-right: -10px; }

	.about-map { margin: 60px auto; width: 95%; height: 500px; float: left; }
	.map { width: 100%; height: 100%; box-shadow: 4px 4px 3px #ccc; }

	.logo-introduce { width: 100%; padding-top: 30px; text-align: center; }
	.logo-icon,
	.introduce { float: none; margin: 0 auto; }
	.introduce i { margin: 25px auto; }
	.introduce p { text-align: left; }

}

@media only screen and (max-width: 1024px){

	.banner-box { height: 500px; }
	.banner-item { height: 500px; }
	.banner-inner .banner-icon { margin-left: 3%; width: 50%; font-size: 28px; background-size: 100%; } 

	.about-img { margin-top: -30px; }
	
	.introduce { width: 100%; }
	.introduce p { padding: 0 20px; }

	.logo-introduce { margin-bottom: 30px; }
	
}

@media only screen and (max-width: 860px){

	.banner-box { height: 400px; }
	.banner-item { height: 400px; }
	.banner-inner .banner-icon { margin-left: 3%; width: 50%; font-size: 24px; }

    .about-title h2 { font-size: 26px; margin-bottom: 10px; }
    .about-title h3 { font-size: 20px; line-height: 30px; }
	.about-text p { font-size: 12px; }

	.about-img { margin-top: 20px; }

	.logo-icon { width: 20%; }
	.logo-icon img { width: 100%; }
	.introduce h3 { font-size: 20px; }
	.introduce p { font-size: 12px; }
	.introduce i { margin: 16px auto; }
	
}

@media only screen and (max-width: 768px){

	.banner-inner .banner-icon { font-size: 18px; }

	.about-text { width: 100%; }
	.about-text p { font-size: 12px; }
	.introduce { width: 100%; }
	.introduce p { padding: 0 20px; }

    .about-img { float: left; margin-top: 40px; width: 184px; height: 212px; margin-right: 10%; margin-left: 0; }
	.about-map { float: left; margin-top: 40px; width: 184px; height: 212px; }
	.map { margin-top: 4px; }

    .about-text p { font-size: 14px; }
	.introduce p { font-size: 14px; }
	
}

@media only screen and (max-width: 580px){

	.banner-box { position: relative; width: 100%; height: 350px; overflow: hidden; z-index: 100; }


    .banner-item { position: relative; height: 350px; }
    .banner-bg img { position: absolute; left: 50%; top: 0; margin-left: -547px; width: 1094px; }
    .banner-inner { width: 240px; margin-left: 5%; }
	.banner-inner .banner-icon { font-size: 16px; width: 240px; height: 59px; line-height: 54px; }

	.about-title h2 { font-size: 26px; }
	.about-title h3 { font-size: 20px; }
	.about-con { width: 90%; margin: 0 5%; overflow: hidden; }

	.about-img { display: none; }
	.about-map { width: 100%; }
	
}